<template>
  <div class="content-right-wrap">
    <div class="top-wrap">
      <Card>
        <div slot="title">
          <div class="fl">{{ showTip }}</div>
        </div>
        <div class="info-wrap">
          <rgith-top />
          <Spin fix v-show="rightTopLoading">数据加载中...</Spin>
        </div>
      </Card>
    </div>
    <div class="bottom-wrap">
      <Card :bordered="false">
        <div slot="title">
          详情
        </div>
        <div class="detail-box">
          <meter-detail
            :id="id()"
            :currentMeterId="currentMeterId"
            :content="meterDetail"
            :columnNames="meterDetailColumns"
          />
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import meterDetailColumns from './meterDetailColumns'
import RgithTop from '../RightTop'
const { mapState } = createNamespacedHelpers('meterReadingOptimize')

export default {
  name: 'meter-reading-optimize-right',
  components: {
    RgithTop,
    MeterDetail: () => import('@/commons/MeterDetail')
  },
  computed: {
    ...mapState(['currentMeterId', 'meterDetail', 'rightTopLoading', 'yqglPieData', 'selectAreaFlag']),
    id() {
      return nanoid
    },
    meterDetailColumns() {
      return meterDetailColumns
    },
    mainShowList() {
      return []
    },
    secShowList() {
      return []
    },
    showTip() {
      let _time = ''
      try {
        const { time } = this.yqglPieData
        _time = time
      } catch (error) {
        // do nothing
      }
      return this.selectAreaFlag ? `最佳抄表时间 ${_time}` : '用气时间分布'
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';

.content-right-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .top-wrap {
    flex: 1;
    margin-bottom: 10px;
    overflow: hidden;

    @{deep}.ivu-card-body {
      overflow: hidden;
    }
  }
  .info-wrap {
    position: relative;
    height: 100%;
    overflow-y: auto;
  }
  .detail-box {
    padding: 0 10px;
  }
}
</style>
